<template>
  <div>
    <div class="public-common">
        <div class="public-title" style="text-indent: 20px;;">员工请假单列表</div>
        <div class="inline-btn">
          <label>员工姓名：</label>
          <el-input v-model="searchdata.txtUserName"></el-input>
          <label>职务：</label>
          <el-input v-model="searchdata.txtOfficeDuty"></el-input>
        </div>
        <div class="inline-btn">
          <label>请假类别：</label>
          <el-input v-model="searchdata.txtLeaveType"></el-input>
          <el-button type="primary" @click="searchBtn">搜索</el-button>
          <el-button type="primary" @click="addBtn">新建</el-button>
          <el-button type="warning" @click="deleteBtn">删除</el-button>
          <el-button type="warning" @click="rejectBtn">注销</el-button>
        </div>
        <div class="" style="margin:2%;">
          <el-table :data="tableData" border width="100%" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="50" label=" " fixed="left"></el-table-column>
            <el-table-column type="selection"  width="55"></el-table-column>
            <el-table-column prop="UserName"  label="员工姓名" sortable></el-table-column>
            <el-table-column prop="OfficeDuty"  label="职务" sortable></el-table-column>
            <el-table-column prop="LeaveType"  label="请假类别" sortable></el-table-column>
            <el-table-column prop="OutTime"  label="开始时间" sortable></el-table-column>
            <el-table-column prop="BackTime"  label="结束时间" sortable></el-table-column>
            <el-table-column prop="OutPlace"  label="公出地点" sortable></el-table-column>
            <el-table-column prop="OutReason"  label="请假/公出事由" sortable></el-table-column>
            <el-table-column prop="Approver"  label="批准人" sortable></el-table-column>
            <el-table-column prop="ApproveTime"  label="批准时间" sortable></el-table-column>
            <el-table-column prop="IsCanceled"  label="注销标志" sortable></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"
            :page-sizes="pagerange"  class="mt"  :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"  :total="totalnum"  ></el-pagination>
        </div>
    </div>
    <!--dialog-->
    <el-dialog title="员工请假单表" :visible.sync="dialogVisible">
      <span>
        <el-form ref="formData" :model="formData" width="50%" style="margin-left:2%;" :rules="formRule" label-width="120px">
        <el-form-item label="员工姓名：" prop="txtUserID">
          <el-select v-model="formData.txtUserID" placeholder="请选择员工姓名">
            <el-option v-for="(t,i) in usedList" :label="t.name" :key="i" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务：" prop="txtOfficeDuty">
          <el-input v-model="formData.txtOfficeDuty" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="请假类别：" prop="txtLeaveType">
          <el-select v-model="formData.txtLeaveType" placeholder="请选择请假类别">
            <el-option v-for="(t,i) in leaveType" :label="t" :key="i" :value="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请假开始时间：" prop="txtOutTime">
          <el-date-picker  type="datetime" v-model="formData.txtOutTime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"></el-date-picker>
        </el-form-item>
        <el-form-item label="请假结束时间：" prop="txtBackTime">
          <el-date-picker  type="datetime" v-model="formData.txtBackTime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"></el-date-picker>
        </el-form-item>
        <el-form-item label="公出地点：" prop="txtOutPlace">
          <el-input v-model="formData.txtOutPlace" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="请假/公出事由：" prop="txtOutReason">
          <el-input v-model="formData.txtOutReason" style="width: 220px;" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="批准人：" prop="txtApprover">
          <el-select v-model="formData.txtApprover" placeholder="请选择批准人">
            <el-option v-for="(t,i) in usedList" :label="t.name" :key="i" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批准时间：" prop="txtApproveTime">
          <el-date-picker  type="datetime" v-model="formData.txtApproveTime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"></el-date-picker>
        </el-form-item>
      </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitData('formData',1)">应用</el-button>
        <el-button type="primary" @click="submitData('formData',2)">确 定</el-button>
        <el-button @click="cancelBtn('formData')">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {leave} from '@/ajax';
import common from '@/utils/common.js';
import config from './Manage.js';
export default {
    data(){
        return {
          searchdata:{
            txtUserName:'',txtOfficeDuty:'',txtLeaveType:''
          },
          totalnum: 0,
          currentPage: 0,
          pagerange: [2, 10, 20, 50, 100],
          pagesize: 10,
          tableData:[],
          dialogVisible:false,
          formData:{txtUserID:'',txtOfficeDuty:'',txtLeaveType:'',txtOutTime:'',
                    txtBackTime:'',txtOutReason:'',txtApprover:'',txtApproveTime:''},
          formRule:{
            txtUserID:{required:true,message:'请选择员工姓名',trigger:'blur'},
            txtLeaveType:{required:true,message:'请选择请假类型',trigger:'blur'},
            txtOutReason:{required:true,message:'请填写请假事由',trigger:'blur'},
            txtApprover:{required:true,message:'请选择批准人',trigger:'blur'},
          },
          selection:[],
          common:common,
          config:config,
          leaveType:config.leaveType,
          usedList:[{'id':'123','name':'lily'}]
        }
    },
    mounted(){
      this.getStaffLeaveList();
    },
    inject:['reload'],
    methods:{
      searchBtn(){
        this.getStaffLeaveList();
      },
      //getStaffLeaveList,deleteStaffLeave,addStaffLeave,rejectStaffLeave
      handleSelectionChange(val){
        if(val){
          this.selection = [];
          for (let i in val) {
            this.selection.push(val[i]['FileID'])
          }
        }
      },
      getStaffLeaveList(){
        this.searchdata['page'] = this.pagesize;
        this.searchdata['rows'] = this.currentPage;
        this.tableData =config.assetsList;
        this.totalnum = this.tableData.length;
        /* leave.getStaffLeaveList(this.searchdata).then((res) => {
          if (res.data.code == '00000') {
            if(res.data.data.length > 0){
              this.tableData = res.data.data;
              this.totalnum = this.tableData.length;
            }else{
              this.tableData = [];
              this.totalnum = 0;
            }
          } else {
            this.$message(res.data.message);
          }
          }).catch(()=>{
            this.$message('服务器正忙，获取文件阅办单列表失败');
          }) */
      },
      //分页
      handleSizeChange(val){
          this.pagesize = val;
          this.getStaffLeaveList();
      },
      handleCurrentChange(val){
          this.currentPage = val;
          this.getStaffLeaveList();
      },
      addBtn(){
        this.formData.txtApproveTime = common.getFormatterTime()+' 09:00:00';
        this.formData.txtOutTime = common.getFormatterTime('time')
        this.formData.txtBackTime = common.getFormatterTime('timelater')
        this.dialogVisible = true;
      },
      cancelBtn(form){
        this.$refs[form].clearValidate();
        this.$refs[form].resetFields();
        this.dialogVisible=false;
      },
      rejectBtn(){
        this.$confirm('您确定要注销所选择的记录吗？', '操作提示', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
           leave.rejectStaffLeave(this.selection).then((res) => {
              if (res.data.code == '00000') {
                this.reload()
              } else {
                this.$message(res.data.message);
              }
            }).catch(()=>{
              this.$message('服务器正忙，注销失败');
            })
        }).catch();
      },
      deleteBtn(){
        if(this.selection.length <= 0){
          this.$message('请选择要操作的数据')
        }else{
          this.$confirm('您确定要删除所选择的记录吗？删除的数据将无法恢复!', '操作提示', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(() => {
             leave.deleteStaffLeave({assetNo:JSON.stringify(this.selection)}).then((res) => {
                if (res.data.code == '00000') {
                  this.reload()
                } else {
                  this.$message(res.data.message);
                }
              }).catch(()=>{
                this.$message('服务器正忙，删除失败');
              })
          }).catch();
        }
      },
      //进行添加（通过type区分应用确定，应用1确定2）
      submitData(form,type){
        this.$refs[form].validate((valid) => {
          if(valid){
            if(this.formData.txtLeaveType == '7' && !this.formData.txtOutPlace){
              this.$message('公出原因不能为空')
            }else{
              leave.addStaffLeave(this.formData).then((res) => {
                  if (res.data.code == '00000') {
                    if(type == 1){
                      this.$refs[form].resetFields();
                    }else{
                      this.reload()
                    }
                  } else {
                    this.$message(res.data.message);
                  }
                }).catch(()=>{
                  this.$message('服务器正忙，操作失败');
              })
            }
          }else{
            return false
          }
        })
      }
    },
    watch:{

    }
}
</script>
<style lang="scss">
.public-common{
    .public-title{line-height: 30px;background-color: #deecfd;}
    .inline-btn{display: inline-flex;margin: 20px;
      label{width:100px;line-height: 32px;margin-left:10px;text-align: right;}
      .el-input{width: 170px;}
      .el-button{margin-left:10px;}
    }
    .el-form-item .el-input,.el-select,.el-date-picker{width: 200px !important;}
    .left{display: inline-block;;width:64%;float: left;}
    .right{display: inline-block;;width:35%;float: left;}
    .el-form .inline-btn{margin:unset;}
    .footer{
      width: 100%;
      display: inline-flex;
      margin-left: 72%;
    }
}
</style>
